
<template>
  <div class="count-down">
    <span class="count-down-end-time">{{ endHousr }}点场</span>
    <span class="count-down-surplus">{{ surplus | filterTime}}</span>
  </div>
</template>
<script>
export default {
  props: {
    endHousr: {
      type: Number,
      required: true,
      default: 0,
    },
  },
  data() {
    return {
      //活动状态
      surplus: "",
      //距离开始的秒数
      diffSeconds: 0,
      interval:undefined
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    //计算展示内容
    computedSurplusTime() {
      if(this.interval){
        clearInterval(this.interval);
      }
      const date = new Date();
      if (date.getHours() > this.endHousr) {
        this.surplus = "活动结束";
        return;
      }
      if (date.getHours() === this.endHousr) {
        this.surplus = "活动进行中";
        return;
      }
      const diffHours = this.endHousr - date.getHours() - 1;
      const diffMinutes = 60 - date.getMinutes() - 1;
      const diffSeconds = 60 - date.getSeconds();
      //计算距离的秒数
      this.diffSeconds = diffHours * 3600 + diffMinutes * 60 + diffSeconds;
      this.interval=setInterval(() => {
        this.diffSeconds-=1;
      }, 1000);
    },
  },
  created () {
    this.computedSurplusTime();
  },
  watch: {
    diffSeconds(newValue) {
      const hours=Math.floor(newValue/3600);
      const minutes=Math.floor(newValue/60)%60;
      const seconds=newValue%60;
      this.surplus=hours+':'+minutes+':'+seconds;
      //变为0的时候
      if(newValue===0){
        this.computedSurplusTime();
      }
    },
    /**
     * 监听结束时间
     */
    endHousr(){
      this.computedSurplusTime();
    }
  },
  computed: {
    
  },
};
</script>

<style lang='scss'>
@import "@css/style.scss";
.seconds-wrap .count-down {
  display: inline-block;
  font-size: $infoSize;
  margin-left: $marginSize;
  span {
    display: inline-block;
    padding: px2rem(2) px2rem(4);
  }

  &-end-time {
    background-color: $mainColor;
    border-top-left-radius: px2rem(4);
    border-bottom-left-radius: px2rem(4);
    border: px2rem(1) solid $mainColor;
    color: #fff;
    font-size: $infoSize;
  }
  &-surplus {
    background-color: #fff;
    border-top-left-radius: px2rem(4);
    border-bottom-left-radius: px2rem(4);
    border: px2rem(1) solid $mainColor;
    color: $mainColor;
    font-size: $infoSize;
  }
}
</style>